<template>
    <view class="vue-tree">
        <view class="tree-content" v-for="(item, index) in computedTreeData">
            <view @click="_clickEvent(item)"  :class="{active: activeId === item.FID}" >
                <view class="border"></view>
                <text class="tree-label">{{ item.FNAME }}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "navTree",
    props: {
        // 树形控件数据
        treeData: {
            type: Array,
            default() {
                return []
            },
        },
        activeId: {
            type: String,
            default: "",
        },
    },
    data() {
        return {}
    },
    computed: {
        computedTreeData() {
            const _arr = this.treeData
            return _arr
        },
    },
    methods: {       
        _clickEvent(item) {
            console.log(item,"点击")
            this.$forceUpdate()
            this.$emit("treeClickEvent", item)
        },
    },
}
</script>
<style lang="scss">
.vue-tree {
    display: flex;
    flex: 1;
    flex-direction: column;
    /* background: #f0f0f0; 
    margin-right: 8rpx;*/
}

.tree-content {
    // display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    &:active {
       font-weight: 700;
       color: $app-color-main;
       background: $color-white;
    }
    .tree-label {
        font-size: $font-size-28;
        min-height: 98rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        position: relative;
        padding: 0 30rpx;
        text-align: center;
    }
}
.active {
    .border {
        background: $app-color-main;
    }
    .tree-label {
        font-weight: 700;
        color: $app-color-main;
        background: $color-white;
    }
}

</style>
